<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>资源管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="./../../layui/css/modules/layer/default/layer.css">
    <link rel="stylesheet" href="./../../CSS/layerPopup.css">
    <link rel="stylesheet" href="../../CSS/media.css">
    <style>
        body{
            overflow-x: hidden;
        }
        #Content{
            width: 100%;
            /*height:700px;*/
            border: medium none;
        }
        .layui-elem-field{
            border-color: #fff !important;
            margin-bottom: 0 !important;
        }
        .layui-nav{
            background: unset!important;
        }
        .layui-nav .layui-nav-item a {
            color: #868686!important;
            font-weight: bold;
            padding-left: 50px;
        }
        .layui-nav i{
            font-weight: normal!important;
            font-size: 18px;
            color: #868686;
            position: absolute;
            left: 20px;
            z-index: 999;
        }
        .layui-nav li :hover{
            color: #1E9FFF!important;
            background: #b6deff!important;
        }
        .layui-nav li :hover i{
            color: #1E9FFF!important;
        }
        .layui-nav-bar {
            display: none;
        }
        .nav_list{
            padding: 10px 0px;
        }
        .nav_list i{
            font-weight: normal!important;
            font-size: 18px;
        }
        .nav_list span{
            margin-left: 10px;
        }
        .nav_list ul li{
            width: 100%;
            height: 50px;
            line-height: 50px;
            padding-left: 35px;
            font-weight: bold;
            color: #868686;
            cursor: pointer;
            box-sizing: border-box;
        }
        .nav_list ul li:hover{
            color: #1E9FFF;
            background: #b6deff;
        }
        .layui-card {
            position: fixed;
            width: 12%;
        }
        .cloundManage{
            width: 80%;
            margin: 10px auto;
            background-color: #ffffff;
        }
        .homepage_btn_phone{
            display: none;
        }
        .homepage_btn_phone .layui-nav-child{
            width: 145px;
            text-align: center;
            min-width: unset!important;
            line-height: 50px;
            border: none;
            top: 79px;
            height: 100%;
            box-shadow: 0 -2px 4px rgba(0,0,0,.12);
            margin-left: -145px;
        }
        .layui-col-space20{
            margin: 0px;
        }
        .beta{
            display: flex;
            flex-wrap: wrap;
        }
        .resources{
            width: 40%;
            height: 85px;
            /* background: #c00; */
            overflow: hidden;
            box-sizing: border-box;
            box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.2);
            border: 1px solid #2b98f0;
            margin:10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /*  */
        .resImg{
            display: block;
            width: 35px;
            height: 24px;
            margin: 0 auto;
        }
        .resTxt{
            width: 100%;
            font-size: 14px;
            color: #2b98f0;
            text-align: center;
        }
        .layui-col-md10{
            margin-top: 10px;
        }
        .e_show_type{
            display: none;
            width: 100px;
            height: 40px;
            line-height: 40px;
            color: #fff;
            text-align: center;
            background: #1E9FFF;
            position: fixed;
            right: 0px;
            top: 60px;
            z-index: 9;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }
    </style>
</head>
<body>
<div class="cloundManage">
    <!--手机模式显示左侧类型按钮-->
    <div class="e_show_type">
        <i class="layui-icon">&#x1005;</i>
        <span>选择类型</span>
    </div>
    <div class="layui-row layui-col-space20">
        <div class="layui-col-md2">
            <div class="layui-card" style="box-shadow:0px 0px 10px 5px rgba(0,0,0,0.2); ">
                <div class="layui-card-body" style="height: 700px;margin: 0px;padding: 0px;">
                    <fieldset class="layui-elem-field layui-field-title " >
                        <legend style="font-size: 18px;font-weight: bold; color: #2b98f0;" >资源监控</legend>
                    </fieldset>
                    <div class="layui-row beta">
                        <div class="resources" onclick="resources('environment')">
                            <div>
                                <img class="resImg" src="./../../static/IMG/Personal/00001_03.png" alt="">
                                <div class="resTxt">云端环境</div>
                            </div>
                        </div>
                        <div class="resources" onclick="resources('status')">
                            <div>
                                <img class="resImg" src="./../../static/IMG/Personal/00001_05.png" alt="">
                                <div class="resTxt">服务状态</div>
                            </div>  
                        </div>
                        <div class="resources" onclick="resources('manager')">
                            <div>
                                <img class="resImg" src="./../../static/IMG/Personal/00001_09.png" alt="">
                                <div class="resTxt">云端管理</div>
                            </div>
                        </div>
                    </div>
                    <!-- <button type="button" class="layui-btn">云端环境</button>
                    <button type="button" class="layui-btn">服务状态</button>
                    <button type="button" class="layui-btn">云端管理</button> -->
                </div>
            </div>
        </div>
        <div class="layui-col-md10" style="box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.2);">
            <iframe style="width:100%;overflow-x: hidden; overflow-y:scroll" id="Content" name="Content" height="1000" scrolling="no" src="CloudEnvironment.html"></iframe>
        </div>
    </div>
</div>
<script src="../../JS/jquery-2.0.3.js"></script>
<script src="../../layui/layui.js" charset="utf-8"></script>
<script src="./../../layui/lay/modules/layer.js"></script>
<script src="../../JS/Personal/PanelControl.js"></script>
<script>
    var layer;
    layui.use(['element','layer'], function () {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        layer=layui.layer;
        //监听导航点击
        element.on('nav(demo)', function (elem) {
            //console.log(elem)
            layer.msg(elem.text());
        });
    });
    $(function () {
        //手机模式显示左侧类型按钮触发事件
        $('.e_show_type').click(function () {
            if ($('.layui-col-md2').css('display') !== 'none') {
                $(this).find('span').text('选择类型');
                $('.layui-col-md2').hide().animate({'left':'-180px'},100)
                $('.layui-col-md10').animate({'marginLeft':'0px'},100)
            } else {
                $(this).find('span').text('隐藏类型');
                $('.layui-col-md2').show().animate({'left':'0px'},100)
                $('.layui-col-md10').animate({'marginLeft':'190px'},100)
            }
        })

        // $('.p_manage').click(function () {
        //     if(  $('.layui-nav-child').css('display') === 'none') {
        //         $('.layui-nav-child').show().animate({'marginLeft':'0px'},100);
        //         $('.layui-col-md10').animate({'marginLeft':'150px','width':'100%'},100)
        //     } else {
        //         $('.layui-nav-child').hide().animate({'marginLeft':'-145px'},100);
        //         $('.layui-col-md10').animate({'marginLeft':'0px','width':'unset'},100)
        //     }
        //
        // })
    })
// 切换页面
function resources(name) {
        if(name == 'environment'){
            document.getElementById("Content").src = "CloudEnvironment.html";
        }else if(name == 'status'){
            document.getElementById("Content").src = "serviceStatus.html";
        }else{
            //询问框
            layer.confirm('即将前往云平台管理界面', {
                skin : "layerCls",
                btn: ['继续','取消'] //按钮
                }, function(index){
                    layer.close(index);
                },function(index){
                    layer.close(index);
            });
        }
    }
</script>

</body>
</html>